<template>
  <section id="related-articles" class="mb-8">
    <h3 class="text-xl font-semibold mb-6 flex items-center">
      <i class="fa fa-newspaper-o text-primary mr-2"></i> {{ title }}
    </h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <a 
        v-for="(article, index) in articles" 
        :key="index"
        :href="article.link"
        class="group bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow"
        @click="handleArticleClick(article, index)"
      >
        <div class="md:flex">
          <div class="md:w-1/3">
            <img 
              :src="article.imageUrl" 
              :alt="article.title" 
              class="h-40 w-full object-cover md:h-full"
              :style="{ filter: imageGrayscale ? 'grayscale(1)' : 'none' }"
            >
          </div>
          <div class="p-4 md:w-2/3">
            <h4 class="font-medium text-gray-900 group-hover:text-primary transition-colors line-clamp-2">
              {{ article.title }}
            </h4>
            <p class="mt-2 text-sm text-gray-500 line-clamp-2">
              {{ article.summary }}
            </p>
            <div class="mt-3 flex items-center text-xs text-gray-400">
              <span>{{ article.publishTime }}</span>
              <span class="mx-2">·</span>
              <span>{{ article.readTime }}</span>
            </div>
          </div>
        </div>
      </a>
    </div>
  </section>
</template>

<script>
export default {
  name: 'RelatedArticles',
  props: {
    // 组件标题
    title: {
      type: String,
      default: '相关推荐'
    },
    // 推荐文章数据
    articles: {
      type: Array,
      default: () => [
        {
          title: '如何做一次让领导眼前一亮的工作汇报：结构与表达技巧',
          summary: '掌握工作汇报的艺术，不仅能清晰展示你的工作成果，还能提升你在领导心中的专业形象...',
          imageUrl: 'https://picsum.photos/id/48/400/300',
          link: '#',
          publishTime: '5天前',
          readTime: '8分钟阅读'
        },
        {
          title: '远程团队沟通指南：消除距离感，提升协作效率',
          summary: '随着远程办公的普及，如何有效进行远程团队沟通成为管理者面临的新挑战...',
          imageUrl: 'https://picsum.photos/id/180/400/300',
          link: '#',
          publishTime: '1周前',
          readTime: '10分钟阅读'
        },
        {
          title: '向上管理的核心：与领导建立高效沟通的5个原则',
          summary: '良好的向上管理不仅能让你的工作更顺畅，还能为你的职业发展加分...',
          imageUrl: 'https://picsum.photos/id/342/400/300',
          link: '#',
          publishTime: '2周前',
          readTime: '7分钟阅读'
        },
        {
          title: '非暴力沟通：如何用温和的方式解决职场冲突',
          summary: '职场冲突不可避免，但解决方式决定了结果是破坏性的还是建设性的...',
          imageUrl: 'https://picsum.photos/id/42/400/300',
          link: '#',
          publishTime: '3周前',
          readTime: '9分钟阅读'
        }
      ]
    },
    // 是否使用灰度图片
    imageGrayscale: {
      type: Boolean,
      default: false
    },
    // 图片圆角大小
    imageRadius: {
      type: [Number, String],
      default: 0
    }
  },
  methods: {
    // 处理文章点击事件
    handleArticleClick(article, index) {
      // 阻止默认行为，以便可以通过事件控制跳转
      event.preventDefault();
      
      // 触发点击事件
      this.$emit('article-click', {
        article,
        index
      });
      
      // 如果设置了链接，可以选择在这里进行跳转
      if (article.link && article.link !== '#') {
        window.location.href = article.link;
      }
    },
    
    // 设置推荐文章数据
    setArticles(newArticles) {
      this.articles = newArticles;
    },
    
    // 切换图片灰度模式
    toggleImageGrayscale() {
      this.imageGrayscale = !this.imageGrayscale;
      this.$emit('grayscale-toggle', this.imageGrayscale);
    }
  },
  
  // 低代码平台支持
  lowcode: {
    meta: {
      componentKey: 'related-articles',
      displayName: '相关推荐组件',
      description: '展示相关文章推荐的组件',
      category: '文章组件',
      version: '1.0.0',
      isContainer: false
    },
    
    configPanel: [
      {
        title: '基础配置',
        fields: [
          {
            name: 'title',
            label: '组件标题',
            type: 'text',
            defaultValue: '相关推荐',
            description: '组件的标题文本'
          },
          {
            name: 'articles',
            label: '推荐文章数据',
            type: 'array',
            defaultValue: [],
            description: '推荐文章列表数据'
          },
          {
            name: 'imageGrayscale',
            label: '图片灰度模式',
            type: 'boolean',
            defaultValue: false,
            description: '是否以灰度模式显示图片'
          },
          {
            name: 'imageRadius',
            label: '图片圆角',
            type: 'number',
            defaultValue: 0,
            description: '图片的圆角大小（像素）'
          }
        ]
      }
    ],
    
    events: [
      {
        name: 'article-click',
        label: '文章点击事件',
        description: '用户点击推荐文章时触发',
        parameters: {
          article: 'object',
          index: 'number'
        }
      },
      {
        name: 'grayscale-toggle',
        label: '灰度模式切换事件',
        description: '图片灰度模式切换时触发',
        parameters: {
          isGrayscale: 'boolean'
        }
      }
    ],
    
    actions: [
      {
        name: 'setArticles',
        label: '设置推荐文章',
        description: '设置推荐文章列表数据',
        parameters: [
          {
            name: 'articles',
            type: 'array',
            required: true,
            description: '新的推荐文章列表数据'
          }
        ]
      },
      {
        name: 'toggleImageGrayscale',
        label: '切换图片灰度模式',
        description: '切换图片是否以灰度模式显示'
      }
    ]
  }
}
</script>

<style scoped>
/* 基础样式已通过Tailwind CSS实现，这里可以添加额外的自定义样式 */

/* 为链接添加过渡效果 */
a {
  transition: all 0.3s ease;
}

/* 调整图片加载行为 */
img {
  transition: filter 0.3s ease;
}

/* 标题悬停效果增强 */
h4 {
  transition: color 0.2s ease;
}

/* 增加卡片阴影的过渡效果 */
.group {
  transition: box-shadow 0.3s ease;
}
</style>